<template>
	<coreshop-page title="申请状态" mode="left">
		<view class="m-25">
			<view class="img-box">
				<image class="img" v-if="state.info?.verifyStatus == DistributionApplyStatus.fail"
					:src="handleStaticResources('/static/images/common/non_real_name.png')" mode="widthFix"></image>
				<image class="img" v-else :src="handleStaticResources('/static/images/common/real_name.png')"
					mode="widthFix"> </image>
			</view>
			<view class="title">
				<view v-if="state.info?.verifyStatus == DistributionApplyStatus.success">恭喜，您的申请已通过！</view>
				<view v-if="state.info?.verifyStatus == DistributionApplyStatus.pending">恭喜，您的申请已提交！</view>
				<view v-if="state.info?.verifyStatus == DistributionApplyStatus.fail">抱歉，您的申请被驳回！</view>
			</view>
			<view class="desc" v-if="state.info?.verifyStatus == DistributionApplyStatus.pending">
				您于{{state.info?.createTime}}提交的申请已经提交成功,当前状态：待审核
			</view>
		</view>
	</coreshop-page>

</template>

<script setup lang="ts">
	import { reactive } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { queryDistributionInfo } from '@/core/api';
	import type { Response } from '@/core/models';
	import { handleShowToast, handleRouteRedirectTo, handleStaticResources } from '@/core/utils';
	import { DistributionApplyStatus } from '@/core/enum';

	const state = reactive<{
		info : any;
	}>({
		info: {},
	})
	onLoad(() => {
		getDistributionInfo();
	});

	/** 获取分销商进度状态 */
	const getDistributionInfo = async () => {
		const info : Response<any> = await queryDistributionInfo();
		if (info.status) {
			state.info = info.data;
			if (info.data?.verifyStatus == DistributionApplyStatus.success || (info.data?.needApply && !info.data?.conditionStatus)) {
				handleRouteRedirectTo('/pages/subpackage/distribution/index/index');
			}
		} else {
			handleShowToast(info.msg)
		}
	}
</script>

<style scoped lang="scss">
	.img-box {
		.img {
			display: block;
			width: 700rpx;
			margin: auto;
			border-radius: 15rpx;
		}
	}

	.title {
		text-align: center;
		padding: 70rpx;
		margin-top: 40rpx;
		font-size: 30rpx;
	}

	.desc {
		text-align: center;
		font-size: 30rpx;
		color: #999;
	}
</style>